

<template>
    <div class="app-container" >
      <div v-if="buttonName==='厂家分布'" class="paneC">
        <el-checkbox-group v-model="csList">
      <el-checkbox label="机泵" />
      <el-checkbox label="消防栓" />
      <el-checkbox label="阀门" />
      <el-checkbox label="仪表" />
      <el-checkbox label="钩子" />
      <el-checkbox label="插销" />
    </el-checkbox-group>
      
      </div>
    
      
      <div id="container">
     
  
        
      </div>
     
      <div id="pane" >
      
        <p class="pane_title">项目分布 </p>
        <p class="pane_title"> {{ userRemark }}</p>
        <el-input v-model="projectName" placeholder="请输入项目名称" clearable />
        
        <div class="pane_table">
          <el-table  :data="roomData" border style="width: 100%" @row-click="rowClick">
      <el-table-column prop="city" label="城市" />
      <el-table-column prop="area" label="地区"  />
      <el-table-column prop="community" label="公司" />
      <el-table-column prop="building" label="详细地址" />
    </el-table>
        </div>
      </div>
    
  
      <div class="top_button">
         <div  class="button_s" @click="getDataS('项目分布')">
          <div class="icon"><el-icon :size="15" >
        <Edit />
      </el-icon></div>
          <span>项目分布</span>
         </div>
  
         <div class="button_s" @click="getDataS('厂家分布')">
          <div class="icon"><el-icon :size="15"><ChatDotRound /></el-icon></div>
          <span>厂家分布</span>
         </div>
  
      </div>
  
      <div class="top_button2" >
         <div class="button_s" @click="getDataS('人员分布')">
          <div class="icon"><el-icon :size="15"><User /></el-icon></div>
          <span>人员分布</span>
         </div>
  
         <div class="button_s" @click="getDataS('在岗人员')">
          <div class="icon"><el-icon :size="15"><MessageBox /></el-icon></div>
          <span>在岗人员</span>
         </div>
  
         <div class="button_s" @click="getDataS('休假人员')">
          <div class="icon"><el-icon :size="15"><EditPen /></el-icon></div>
          <span>休假人员</span>
         </div>
  
      </div>
    </div>
  </template>
  <script setup lang="ts">
  import AMapLoader from '@amap/amap-jsapi-loader';
  import { ref, onMounted ,watch } from 'vue';
  import 'element-plus/dist/index.css'
  import {getUser} from '../../https/api/user'
  let projectName = ref('')
  
  
  
  
  
  let map = ref<any>(null);
  // 点聚合
  let cluster = ref<any>(null);
  let infoWindow = ref<any>(null);
  
  let windowHeight = ref(document.documentElement.clientHeight);
  let AMap = ref<any>(null);
  let init = async () => {
    let res = await AMapLoader.load({
      key: '4056aa1b76794cdb8df1d5ee0000bdb8&&plugin=AMap.Scale,AMap.HawkEye,AMap.ToolBar,AMap.ControlBar,AMap.PlaceSearch,AMap.DistrictSearch,AMap.HeatMap,AMap.3DTilesLayer,AMap.IndoorMap,AMap.MoveAnimation,AMap.ElasticMarker,AMap.MarkerCluster,AMap.IndexCluster,AMap.MouseTool,AMap.BezierCurveEditor,AMap.RectangleEditor,AMap.CircleEditor,AMap.EllipseEditor,AMap.GeoJSON,AMap.PolylineEditor,AMap.PolygonEditor,AMap.AutoComplete,AMap.Driving,AMap.Walking,AMap.Riding,AMap.Transfer,AMap.Geocoder,AMap.GraspRoad,AMap.StationSearch,AMap.LineSearch,AMap.ArrivalRange,AMap.CitySearch,AMap.Geolocation,AMap.Weather,AMap.RangingTool', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.IndexCluster', 'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    });
    AMap.value = res;
    map.value = new res.Map('container', {
      resizeEnable: true,
      zoom: 5,
      pitchEnable: true,
    });
  
    cluster.value = new res.IndexCluster(map.value, roomData.value, {
    
      renderClusterMarker: _renderClusterMarker,
      clusterIndexSet: {
        country: {
              minZoom:1,
              maxZoom: 7,
          },
        city: {
              minZoom: 7,
              maxZoom: 10,
          },
          
          area: {
              minZoom: 10,
              maxZoom: 15,
          },
          community: {
              minZoom: 15,
              maxZoom: 22,
          },
         
      },
     
    });
  };
  
  
  
  let getStyle= (context: { clusterData: any; index: any; count: any; marker: any; }) => {
   
    let clusterData = context.clusterData; // 聚合中包含数据
          let index = context.index; // 聚合的条件
          console.log(index['mainKey']);
          let count = context.count; // 聚合中点的总数
          var marker = context.marker; // 聚合绘制点 Marker 对象
          var color = [
              '8,60,156',
              '66,130,198',
              '107,174,214',
              '78,200,211',
          ];
          var indexs = ['country','city','district','area','community'];
          var i = indexs.indexOf(index['mainKey']);
         
          
          var text = clusterData[0][index['mainKey']];
          console.log(clusterData);
          var size = Math.round(30 + Math.pow(count / roomData.value.length, 1 / 5) * 70);
          if(i <= 2){
            //  var extra = '<span class="showCount">'+ context.count +'套11</span>';
            //   text = '<span class="showName">'+ text +'</span>';
            //   text += extra;
              
              
          } else {
              size = 12 * text.length + 20;
          }
          let style = {
              bgColor: 'rgba(' + color[i] + ',.8)',
              borderColor: 'rgba(' + color[i] + ',1)',
              text: text,
              size: size,
              index: i,
              color: '#ffffff',
              textAlign: 'center',
              boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
          }
          return style;
  }
  
  
  
  
  let _renderClusterMarker = (context: any) => {
    console.log(context);
    
    let clusterData = context.clusterData; // 聚合中包含数据
          var index = context.index; // 聚合的条件
          var count = context.count; // 聚合中点的总数
          var marker = context.marker; // 聚合点标记对象
          var styleObj = getStyle(context);
          // 自定义点标记样式
          var div = document.createElement('div');
          div.className = 'amap-cluster';
          div.style.backgroundColor = styleObj.bgColor;
          div.style.width = styleObj.size + 'px';
          if(styleObj.index <= 2) {
              div.style.height = styleObj.size + 'px';
              // 自定义点击事件
              context.marker.on('click', (e: { lnglat: any; }) => {
                  console.log(e)
                  let curZoom = map.value.getZoom();
                  if(curZoom < 20){
                      curZoom += 2;
                  }
                  map.value.setZoomAndCenter(curZoom, e.lnglat);
              });
          }
          div.style.border = 'solid 1px ' + styleObj.borderColor;
          div.style.borderRadius = styleObj.size + 'px';
          div.innerHTML = styleObj.text;
          console.log(styleObj.text);
          
          div.style.color = styleObj.color;
          div.style.textAlign = styleObj.textAlign;
          div.style.boxShadow = styleObj.boxShadow;
          context.marker.setContent(div)
          // 自定义聚合点标记显示位置
          
          context.marker.setAnchor('center');
  
  };
  
  
  
  
  
  let rowClick = (row: any) => {
    
    getClick(row)
  }
  
  let getClick = (item: any) => {
    map.value.setCenter([item.lnglat.KL, item.lnglat.kT]); // 设置地图中心点
    //       var zoom = 20; //zoom范围[11,18]
    map.value.setZoom(20); // 设置地图层级
  };
  
  let userName = ref('')
  let userRemark = ref('')
  let getData = async (data : any) => {
    let res = await  getUser(data)
    console.log(res);
    userName.value =  res.data[0].userName
    userRemark.value = res.data[0].userRemark
  }
  
  onMounted(() => {
    roomData.value = data1
    getData({userName:JSON.parse(sessionStorage.getItem('userInfo'))?.user.name}) || '1'
  });
  
  let csList = ref([])
  
  let data4:any =  [
  {
      lnglat: [114.177087, 22.313861],
       community: '香港22001设备商有限责任公司',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: '旺角',
      markers: [],
      id: 1,
      city: '香港',
    },
    {
      lnglat: [114.174986, 22.310604],
     
      community: '香港002设备商有限责任公司',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: '油麻地',
      id: 2,
      city: '香港',
    },
    {
      lnglat: [114.170009, 22.310604],
      
      community: '香港003设备商有限责任公司',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: '油麻地',
      id: 3,
      city: '香港',
    },
  
    {
      lnglat: [114.194512, 22.326271],
      
      community: '香港004设备商有限责任公司',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: '九龙城',
      id: 4,
      city: '香港',
    },
    
  ]
  
  let data3:any =  [
   
    {
      lnglat: [107.93, 34.28],
  
      community: '陕西2有限责任公22司',
      building: 'xxx路XX街001设备22商有限责任公司',
      Bh: '0298908765',
      area: "未央区",
      id: 5,
      city: '陕西',
    },
    {
      lnglat: [107.93, 34.286],
  
      community: '陕西有限责任公22司23',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: "未央区",
      id: 6,
      city: '陕西',
    },
    {
      lnglat: [107.95, 34.27],
       community: ' 陕西有限责任公司4',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: "未央区",
      id: 7,
      city: '陕西',
    },
    
  ]
  
  
  let data1:any = [
    {
      lnglat: [114.177087, 22.313861],
      country:'中国',
      community: '香港22001设备商有限责任公司',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: '旺角',
      markers: [],
      id: 1,
      city: '香港',
    },
    {
      lnglat: [114.174986, 22.310604],
      country:'中国',
      community: '香港002设备商有限责任公司',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: '油麻地',
      id: 2,
      city: '香港',
    },
    {
      lnglat: [114.170009, 22.310604],
      country:'中国',
      community: '香港003设备商有限责任公司',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: '油麻地',
      id: 3,
      city: '香港',
    },
  
    {
      lnglat: [114.194512, 22.326271],
      country:'中国',
      community: '香港004设备商有限责任公司',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: '九龙城',
      id: 4,
      city: '香港',
    },
  
    {
      lnglat: [108.93, 34.28],
      country:'中国',
      community: '陕西001设备商有限责任公司',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: "未央区",
      id: 5,
      city: '陕西',
    },
    {
      lnglat: [108.93, 34.286],
      country:'中国',
      community: '陕西002设备商有限责任公司',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: "未央区",
      id: 6,
      city: '陕西',
    },
    {
      lnglat: [108.95, 34.27],
       community: ' 陕西003设备商有限责任公司',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: "未央区",
      id: 7,
      country:'中国',
      city: '陕西',
    },
    
  ]
  
  let data2:any =  [
   
    {
      lnglat: [108.93, 34.28],
  
      community: '陕西001设备商有限责任公司',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: "未央区",
      id: 5,
      city: '陕西',
    },
    {
      lnglat: [108.93, 34.286],
  
      community: '陕西002设备商有限责任公司',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: "未央区",
      id: 6,
      city: '陕西',
    },
    {
      lnglat: [108.95, 34.27],
       community: ' 陕西003设备商有限责任公司',
      building: 'xxx路XX街001设备商有限责任公司',
      Bh: '0298908765',
      area: "未央区",
      id: 7,
      city: '陕西',
    },
    
  ]
  
  let buttonName = ref('')
  
  let getDataS = (name: any)=> {
    buttonName.value = name
    if(name === '项目分布'){
      roomData.value = data1
    }else if(name === '厂家分布'){
      roomData.value = data4
    }else if(name === '人员分布'){
      roomData.value = data3
    }else if(name === '休假人员'){
      roomData.value = data2
    }else if(name === '在岗人员'){
      roomData.value = data4
    }
  }
  
  
  
  
  let roomData = ref<[]>([]);
  
  
  watch(roomData,()=>{
  
    
    init();
  },{deep:true})
  </script>
  
  
  <style lang="less" scoped>
  .button_s:hover{
    color: white;
    background: #79bbff;
  }
  .button_s{
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
  padding: 10px 20px;
  font-size: 10px;
  .icon{
    margin-bottom:5px;
  }
  }
  .top_button{
    display: flex;
  
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 5px;
    background: white;
    border-radius: 10px;
  }
  
  .top_button2{
    display: flex;
  
    position: absolute;
    top: 20px;
    left: 250px;
    padding: 5px;
    background: white;
    border-radius: 10px;
  }
  .pane_table{
    margin-top:20px
  }
  .pane_title{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .markerClass {
    background-color: #c0e5dfa5;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .imgimg {
      width: 50px;
      height: 50px;
    }
    .bgimg {
      position: absolute;
      left: 50%;
      width: 50px;
      height: 30px;
      //  background: url("/public/1.png") no-repeat;
      background-size: 100% 100%;
      transform: translateX(-50%);
    }
  
  }
  #container {
     position: relative;
    width: 75%;
    height:calc(100vh - 6rem);
  }
  .amap-marker-label {
    position: absolute;
    z-index: 2;
    border: none;
    background-color: #ffffff;
    white-space: nowrap;
    cursor: default;
    padding: 4px;
    font-size: 14px;
    line-height: 19px;
    color: #097a7a;
  }
  
  html {
    font-size: 12px;
  }
  .amap-copyright {
    box-sizing: content-box;
  }
  * {
    box-sizing: border-box;
  }
  .input-textarea {
    color: grey;
    height: 8em;
    overflow: auto;
    border-radius: 0.4rem;
  
    margin-bottom: 1rem;
  }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    line-height: 1.5;
    font-weight: 300;
    color: #111213;
  }
  
  hr {
    margin: 0.5rem 0;
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  p {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  label {
    display: inline-block;
    margin-bottom: 0.4rem;
  }
  
  label,
  .btn {
    margin-left: 0;
    font-size: 1rem;
  }
  
  button,
  input,
  select {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    overflow: visible;
    text-transform: none;
  }
  
  [type='button']::-moz-focus-inner,
  [type='reset']::-moz-focus-inner,
  [type='submit']::-moz-focus-inner,
  button::-moz-focus-inner {
    padding: 0;
    border-style: none;
  }
  
  input[type='checkbox'],
  input[type='radio'] {
    box-sizing: border-box;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0 0.5rem 0 0;
  }
  
  h4 {
    font-family: inherit;
    line-height: 1.8;
    font-weight: 300;
    color: inherit;
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
  
  .btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
      box-shadow 0.15s ease-in-out;
    background-color: transparent;
    background-image: none;
    color: #25a5f7;
    border-color: #25a5f7;
    padding: 0.25rem 0.5rem;
    line-height: 1.5;
    border-radius: 1rem;
    -webkit-appearance: button;
    cursor: pointer;
  }
  
  .btn:hover {
    color: #fff;
    background-color: #25a5f7;
    border-color: #25a5f7;
  }
  
  .btn:hover {
    text-decoration: none;
  }
  
  .input-item {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 3rem;
    justify-content: flex-end;
  }
  
  .input-item:last-child {
    margin-bottom: 0;
  }
  
  .input-item > select,
  .input-item > input[type='text'],
  .input-item > input[type='date'] {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
  }
  
  .input-item > select:not(:last-child),
  .input-item > input[type='text']:not(:last-child),
  .input-item > input[type='date']:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  .input-item > select:not(:first-child),
  .input-item > input[type='text']:not(:first-child),
  .input-item > input[type='date']:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  
  .input-item-prepend {
    margin-right: -1px;
  }
  
  .input-item-text,
  input[type='text'],
  input[type='date'],
  select {
    height: calc(2.2rem + 2px);
  }
  
  .input-item-text {
    width: 6rem;
    text-align: justify;
    padding: 0.4rem 0.7rem;
    display: inline-block;
    text-justify: distribute-all-lines;
    /*ie6-8*/
    text-align-last: justify;
    /* ie9*/
    -moz-text-align-last: justify;
    /*ff*/
    -webkit-text-align-last: justify;
    /*chrome 20+*/
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
  
    border-radius: 0.25rem;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  
  .amap_lib_placeSearch_list li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .input-item-text input[type='checkbox'],
  .input-item-text input[type='radio'] {
    margin-top: 0;
  }
  
  .input-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: 0.25rem;
    width: 22rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
    position: fixed;
    //bottom: 1rem;
    top: 5rem;
    opacity: 0.85;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
    height: 780px;
    overflow: auto;
  }
  
  .input-text {
    line-height: 2rem;
    margin-right: 2rem;
    font-size: 18px;
  }
  
  .info hr {
    margin-right: 0;
    margin-left: 0;
    border-top-color: grey;
  }
  
  .info {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
    position: fixed;
    top: 1rem;
    background-color: white;
    width: auto;
    min-width: 22rem;
    border-width: 0;
    right: 1rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  }
  
  .code {
    left: 1.5rem;
    right: 1.5rem;
    top: 1.5rem;
    bottom: 1.5rem;
    overflow: auto;
    margin-bottom: 0rem;
  }
  
  .code .btn {
    top: 1rem;
    position: absolute;
    right: 1rem;
  }
  
  .code .result {
    border-radius: 0.5rem;
    padding: 1rem;
    bottom: 1rem;
    position: absolute;
    top: 5.5rem;
    right: 1rem;
    left: 1rem;
    overflow: auto;
  }
  
  .code .status {
    color: #80adff;
    display: inline-block;
    font-size: 14px;
  }
  
  .code h4 {
    display: inline-block;
    max-width: 20rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
  }
  
  select,
  input[type='text'],
  input[type='date'] {
    display: inline-block;
    width: 100%;
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: #fff
      url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
      no-repeat right 0.75rem center;
    background-size: 8px 10px;
  
    border-radius: 0.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  input[type='text'],
  input[type='date'] {
    background: #fff;
    padding: 0.375rem 0.75rem;
  }
  
  select:focus,
  input[type='text']:focus,
  input[type='date']:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, 0.1);
  }
  
  .btn:focus {
    outline: 0;
    box-shadow: none;
  }
  
  select:focus::-ms-value,
  input[type='text']:focus::-ms-value,
  input[type='date']:focus::-ms-value {
    color: #495057;
    background-color: #fff;
  }
  
  /* native toastr */
  .native-toast {
    position: fixed;
    background-color: rgba(50, 50, 50, 0.8);
    border-radius: 33px;
    color: white;
    left: 50%;
    text-align: center;
    padding: 6px 12px;
    opacity: 0;
    z-index: 99999;
    transition: transform 0.25s, opacity 0.25s, top 0.25s;
    box-sizing: border-box;
  }
  
  .native-toast-bottom {
    bottom: 50px;
    -ms-transform: translateX(-50%) translateY(50px);
    transform: translateX(-50%) translateY(50px);
  }
  
  .native-toast-bottom.native-toast-shown {
    opacity: 1;
    -ms-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
  }
  
  .native-toast-bottom.native-toast-edge {
    bottom: 0;
  }
  
  .native-toast-top {
    top: 50px;
    -ms-transform: translateX(-50%) translateY(-50px);
    transform: translateX(-50%) translateY(-50px);
  }
  
  .native-toast-top.native-toast-shown {
    opacity: 1;
    -ms-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
  }
  
  .native-toast-top.native-toast-edge {
    top: 0;
  }
  
  .native-toast-center {
    top: 0;
    -ms-transform: translateX(-50%) translateY(-50px);
    transform: translateX(-50%) translateY(-50px);
  }
  
  .native-toast-center.native-toast-shown {
    opacity: 1;
    top: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  
  .native-toast-edge {
    border-radius: 0;
    width: 100%;
    text-align: left;
  }
  
  @media screen and (min-width: 40rem) {
    .native-toast:not(.native-toast-edge) {
      max-width: 18rem;
    }
  }
  
  /*
    max-width does not seem to work in small screen?
  */
  
  /*@media screen and (max-width: 768px) {
    .native-toast:not(.native-toast-edge) {
      max-width: 400px;
    }
  }
  
  @media screen and (max-width: 468px) {
    .native-toast:not(.native-toast-edge) {
      max-width: 300px;
    }
  }*/
  
  /* types */
  
  .poi-title {
    margin-bottom: 10px;
    font-weight: bold;
  }
  
  .native-toast-error {
    background-color: #d92727;
    color: white;
  }
  
  .native-toast-success {
    background-color: #62a465;
    color: white;
  }
  
  .native-toast-warning {
    background-color: #fdaf17;
    color: white;
  }
  
  .native-toast-info {
    background-color: #5060ba;
    color: white;
  }
  
  [class^='native-toast-icon-'] {
    vertical-align: middle;
    margin-right: 8px;
  }
  
  [class^='native-toast-icon-'] svg {
    width: 16px;
    height: 16px;
  }
  
  .input-card {
    width: 32rem;
    z-index: 170;
    color: #fff;
    background-color: #304156;
    padding-bottom: 15px;
  }
  
  .input-card .btn {
    margin-right: 0.8rem;
  }
  
  .input-card .btn:last-child {
    margin-right: 0;
  }
  .input-text {
    font-size: 30x;
  }
  label,
  .btn {
    margin-left: 0;
    font-size: 1.6rem;
  }
  .input-item {
    margin-top: 12px;
  }
  
  .input-cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-radius: 0.25rem;
    width: 22rem;
    border-width: 0;
    border-radius: 0.4rem;
    position: fixed;
    top: 5rem;
    opacity: 0.85;
    left: 20rem;
    -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }
  
  .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    font-size: 1.5em;
    color: #cfe2f7;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  select,
  input[type='text'],
  input[type='date'] {
    color: #45b2f7;
  }
  .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    font-size: 1.5em;
    color: #4f5d6f;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 30px;
    width: 280px;
    height: 43px;
  }
  .el-form-item {
    margin-bottom: 7px;
    margin-top: 7px;
  }
  
  .paneC{
  
    position: absolute;
    left: 64%;
    top: 20px;
    padding: 20px;
    background: white;
    z-index: 999;
    /deep/ .el-checkbox-group{
      display: flex;
      flex-direction: column;
    }
  }
  .app-container {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0px;
  }
  
  .content_s{
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0px;
  }
  
  
  #pane {
    
    background: white;
    padding: 20px;
    position: relative;
    background-color: white;
    height:calc(100vh - 6rem);
    overflow-y: auto;
    width: 25%;
    // overflow: auto;
    // height: 600px;
  }
  .amap_lib_placeSearch {
    border-radius: 2px;
    padding: 5px 10px 2px;
  }
  .amap_lib_placeSearch {
    font-family: Microsoft Yahei, Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #565656;
    font-size: 12px;
    line-height: 22px;
    word-wrap: break-word;
    background-color: #fff;
  
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    min-width: 270px;
  }
  .amap_lib_placeSearch_list {
    background: #fff none repeat scroll 0 0;
  }
  .amap_lib_placeSearch ol,
  .amap_lib_placeSearch ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
  }
  .amap_lib_placeSearch .poibox {
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    padding: 10px 5px;
    position: relative;
    min-height: 35px;
  }
  .amap_lib_placeSearch_pic {
    width: 46px;
    height: 46px;
    float: left;
    margin: 4px 10px 0 0;
  }
  .amap_lib_placeSearch_pic img {
    width: 46px;
    height: 46px;
  }
  .amap_lib_placeSearch .poibox .poi-title {
    margin-left: 25px;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
  }
  .amap_lib_placeSearch .poibox .poi-title .poi-name {
    max-width: 160px;
    display: inline-block;
  }
  .amap_lib_placeSearch .amap-ellipsis {
    max-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .amap_lib_placeSearch .poibox .poi-info {
    word-break: break-all;
    margin: 0 0 0 25px;
    overflow: hidden;
  }
  .amap_lib_placeSearch .poibox .poi-info p {
    color: #999;
    font-family: Tahoma;
    line-height: 20px;
  }
  .amap_lib_placeSearch .amap-ellipsis {
    max-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }
  .amap_lib_placeSearch p {
    margin: 0;
  }
  </style>
  